<template>
	<view class="pages">
		<view class="activity">
			<image :src="info.cover" mode="aspectFill"></image>
			<view class="delate_btn u-flex-xy-center" @click="delate" v-if="user_info.isMatchmaker==1">
				<text>删除活动</text>
			</view>
		</view>
		<view class="content" v-if="info">
			<view class="main">
				<view class="u-flex-y-center u-flex-between title_warp">
					<text class="title">{{info.name}}</text>
					<view class="u-flex-xy-center editor_warp" @click="editor"  v-if="user_info.isMatchmaker==1">
						<image :src="`${$http_cos}/static/%E7%BC%96%E8%BE%91.png`"></image>
						<text>编辑</text>
					</view>
				</view>
				<view class="u-flex-column message">
					<text>活动人数：{{info.num}}人</text>
					<text>活动时间：{{result(info.time,'datetime')}}</text>
					<text>活动地点：{{info.address}}</text>
				</view>
				<view class="line"></view>
				<text class="label">活动介绍</text>
				<view class="desc">
					<text>{{info.desc}}</text>
				</view>
				<image :src="get_src(info.descImage)" mode="widthFix" v-if="info.descImage" @click="previewImage('',JSON.parse(info.descImage))"></image>
			</view>
			<view class="main">
				<view class="title_warp">
					<text class="label">活动瞬间</text>
				</view>
				<view v-for="(item,index) in info.moment" v-if="info.moment" class="item_moment" @click="previewImage(item.url,info.moment)">
					<image :src="item.url" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- <view style="width:100%;height:140rpx;"></view>
		<view class="fixed_bottom">
			<view class="participate_immediately u-flex-xy-center">
				<text>马上参与</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getActivityOne,
		delActivity
	} from '@/common/api.js'
	const app = getApp();
	export default {
		data() {
			return {
				id: 0,
				user_info:{},
				info: {

				}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.get_ActivityList()
		},

		onShow() {

			try {
				
				if (uni.getStorageSync('user_info')) {
					this.user_info=uni.getStorageSync('user_info')
				} else {
					
				}
			} catch (e) {
				//TODO handle the exception
			}

		},
		methods: {
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast
				if (time == undefined || time == '') {
					return ''
				}
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			},
			editor() {
				uni.navigateTo({
					url: '/pagesB/sendActive/index?id=' + this.id
				})
			},
			get_ActivityList() {
				let data = {
					params: {
						id: this.id
					}

				}
				getActivityOne(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					result.moment = this.get_srcs(result.moment)
					this.info = result

				}).catch((err) => {

				})
			},

			return_beforePage() {
				let pages = getCurrentPages()
				if (pages.length > 0) {
					let beforePage = pages[pages.length - 2]
					// #ifdef H5
					beforePage.init_info()
					// #endif
					// #ifndef H5
					beforePage.$vm.init_info()
					// #endif
					uni.navigateBack()
				}else{
					uni.switchTab({
						url:'/pages/moment/index'
					})
				}
			},
			delate() {
				let data = {
					id: this.id
				}
				delActivity(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					uni.$u.toast(this.info.name + '活动删除成功')
					this.return_beforePage()
				}).catch((err) => {

				})
			},
			previewImage(it,item) {
				let urls=item
				urls=urls.map(it=>{
					return it.url
				})
				uni.previewImage({
					urls: urls, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current:it, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

			send_activity() {
				uni.navigateTo({
					url: '/pagesB/sendActive/index'
				})
			},
			get_srcs(it) {
				let arr = JSON.parse(it)
				return arr
			},
			get_src(it) {
				let {
					url
				} = JSON.parse(it)[0]
				// return url+'?watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTEwMDAwMDQucGljc2gubXlxY2xvdWQuY29tL3NodWl5aW4uanBn/gravity/northwest'
				return url
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #fff;

		.activity {
			position: relative;
			width: 750rpx;
			height: 290rpx;

			.delate_btn {
				position: absolute;
				width: 140rpx;
				height: 52rpx;
				background: #000000;
				right: 24rpx;
				top: 24rpx;
				opacity: 0.5;
				border-radius: 8rpx;

				text {
					font-size: 26rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FEFEFE;
				}
			}
		}

		.content {
			border-radius: 30rpx 30rpx 0px 0px;
			box-sizing: border-box;
			overflow: hidden;
			position: relative;
			top: -20rpx;

			.main {
				background-color: #fff;
				padding: 0rpx 40rpx 43rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;

				.line {
					width: 100%;
					height: 2rpx;
					margin: 40rpx 0;
					box-sizing: border-box;
					background: #D2D2D2;
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5);
				}

				.label {
					font-size: 28rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #111111;
				}

				.desc {
					// padding:33rpx 0 22rpx;
					line-height: 40rpx;
					margin-bottom: 22rpx;
					box-sizing: border-box;

					text {
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #111111;
					}
				}

				.title_warp {
					padding: 39rpx 0;
					box-sizing: border-box;

					.title {
						font-size: 38rpx;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: #111111;
					}

					.editor_warp {
						image {
							width: 36rpx;
							height: 34rpx;
							margin-right: 11rpx;
						}

						text {
							font-size: 28rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #888888;
						}
					}
				}

				.message {
					text {
						line-height: 40rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #111111;
					}
				}

				.item_moment {
					width: 100%;
					margin-bottom: 20rpx;
				}
			}
		}

		.fixed_bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 140rpx;
			background-color: #fff;
			padding: 24rpx;
			box-sizing: border-box;

			.participate_immediately {
				width: 100%;
				height: 100%;
				background-color: #FF7612;
				color: #fff;
				border-radius: 92rpx;

				text {
					font-size: 30rpx;

				}
			}
		}
	}
</style>
